<template>
    <el-tabs v-model="active" type="card" closable @tab-remove="removeTab" @tab-change="changeTab">
        <el-tab-pane v-for="item in tabStore.tab" :key="item.name" :name="item.name">
            <template #label>
                <span style="font-size: 15px"> {{ tabStore.menuid == 1 ? $t(item.name) : item.name }}</span>
            </template>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
// 引入 Pinia store
//@ts-ignore
import { usetabsStore, useshareStore } from '@/store';
import { useRouter } from 'vue-router';
const router = useRouter();
const tabStore = usetabsStore() as any;
const Stores = useshareStore();
let active = ref(tabStore.activetab);
let activeindex = ref(tabStore.activetabindex);

// 监听计算属性的变化以更新本地状态
watch(
    () => tabStore.activetabindex,
    (newValue) => {
        activeindex.value = newValue;
    }
);

watch(
    () => tabStore.activetab,
    (newValue) => {
        active.value = newValue;
    }
);

const removeTab = (targetName: string) => {
    let tabToRemove = tabStore.tab.find((tab) => tab.name === targetName);
    let index = tabStore.tab.findIndex((tab) => tab.name === targetName);
    let next: any = [];
    Stores.setstoragetab(tabToRemove['componentNm'], 'del');
    //非当前页签，直接移除
    if (tabStore.activetab != targetName) {
        tabStore.desctab(tabToRemove);
        return;
    }
    //如果是第一个页签
    if (index == 0) {
        //如果只有一个页签,不做处理
        if (tabStore.tab.length == 1) {
        } else {
            //否则路由跳向前面一个页签
            next = tabStore.tab[index + 1];
        }
    } else {
        next = tabStore.tab[index - 1];
    }
    tabStore.desctab(tabToRemove);
    if (next.path != undefined) {
        router.push(next.path);
    } else {
        router.push('/dashboard');
    }
};

const changeTab = (targetName: string) => {
    //处理路由拦截时候，active还是改变了
    setTimeout(() => {
        active.value = tabStore.activetab;
        activeindex.value = tabStore.activetabindex;
    }, 10);
    let tabchange = tabStore.tab.find((v) => v.name === targetName);
    router.push({
        path: tabchange.path,
        query: tabchange.query,
    });
};
</script>

<style scoped>
.el-tabs {
    margin-top: 5px;
    --el-tabs-header-height: 50px;
}
:deep(.el-tabs__item) {
    align-items: center;
    box-sizing: border-box;
    color: white;
    display: flex;
    font-size: var(--el-font-size-base);
    font-weight: 1000;
    height: var(--el-tabs-header-height);
    justify-content: center;
    list-style: none;
    padding: 0 20px;
    position: relative;
    background-color: #0788e3;
    border-radius: 20px;
}
:deep(.el-tabs__item:hover) {
    color: #0effbf;
    background-color: #046cb5; /* 设置悬停时的背景颜色 */
}

:deep(.el-tabs__item.is-active) {
    background-color: #0764a5; /* 设置选中标签的背景颜色 */
    color: white; /* 设置选中标签的字体颜色 */
}

:deep(.el-tabs__nav-next) {
    right: 0;
    height: var(--el-tabs-header-height);
    background: #45a6eb;
}

:deep(.el-tabs__nav-prev) {
    left: 0;
    background: #45a6eb;
}
:deep(.el-icon svg) {
    height: 1em;
    width: 1em;
    color: black;
}
</style>
